import React from "react";
import { Input, DatePicker, Radio, Checkbox, Select,Button } from 'antd'
import './NewProductPromotion.css'
import {Link} from 'react-router-dom'
const { RangePicker } = DatePicker;
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['普通', '一级代理', '二级代理', '三级代理'];
const defaultCheckedList = ['普通'];
const { Option } = Select;
export default class NewProductPromotion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: 3,
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      showElem1: true,
      showElem2: false,
    };
  }
  onChange1 = e => {
    console.log('radio checked', e.target.value1);
    this.setState({
      value1: e.target.value,
    });
  };
  onChangeList = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };
  show1 = e => {
    this.setState({
      showElem1: true,
      showElem2: false
    })
  }
  show2 = e => {
    this.setState({
      showElem1: false,
      showElem2: true
    })
  }
  handleChange(value) {
    console.log(`selected ${value}`);
  }
  render() {
    let { size } = this.state;
    return (
      <div >
        <div className={'chose1'}>
          <span>促销主题</span>
          <Input />
        </div>
        <div className={'choseTime1'}>
          <span>促销时间</span>
          <RangePicker size={size} />
        </div>
        <div className={'choseType1'}>
          <span>促销类型</span>
        </div>
        <div className={'choseRules1'}>
          <span>促销规则</span>
          <div>
            <Radio.Group onChange={this.onChange1} value={this.state.value1}>
              <div className={'input1'}>
                <Radio onChange={this.show1} value={3}>买赠</Radio>
                {
                  this.state.showElem1 ? (
                    <div><span>购买数量每满</span>
                      <Input />
                      <span>,赠送</span>
                      <Input />
                      <span>个</span></div>
                  ) : null
                }

              </div>
              <div className={'input1'}>
                <Radio onChange={this.show2} value={4}>直降</Radio>
                {
                  this.state.showElem2 ? (
                    <div><span>购买数量满</span>
                      <Input />
                      <span>,促销订货价统一降至</span>
                      <Input />
                      <span>元</span></div>
                  ) : null
                }
              </div>
            </Radio.Group>
          </div>
        </div>
        <div className={'choseDealer1'}>
          <span>经销商</span>
          <div>
            <div className="site-checkbox-all-wrapper">
              <Checkbox
                indeterminate={this.state.indeterminate}
                onChange={this.onCheckAllChange}
                checked={this.state.checkAll}
              >
                Check all
          </Checkbox>
            </div>
            <CheckboxGroup
              options={plainOptions}
              value={this.state.checkedList}
              onChange={this.onChangeList}
            />
          </div>
        </div>
        <div className={'choseAddress1'}>
          <span>区域</span>
          <Select defaultValue="全部" style={{ width: 500 }} onChange={this.handleChange}>
            <Option value="全部">全部</Option>
            <Option value="中国">中国</Option>
            <Option value="其他区域">其他区域</Option>
          </Select>
        </div>
        <div className={'final'}>
        <Button className={'button'} style={{ backgroundColor: 'white', border: '1px solid #D3D3D3', color: 'black' }} type="primary">取消</Button>
        <Link to="/homepage/productpromotion">
          <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">保存</Button>
        </Link>
        
        </div>
      </div>
    );
  }
}


